<template>
	<view class="">
		<view class="bg_FFFFFF u-p-20 u-b-r-20">
			<view class="u-flex u-row-between u-b-r-20 u-m-t-20" style="background-color:#F5F5F5FF ; padding: 20rpx;">
				<view class="u-font-28">店铺头像</view>
				<u-upload @on-success="uploaded" upload-text="点击上传" @on-remove="remove" :preview-full-image="false"
					:file-list="fileList" imageMode="aspectFit" :show-progress="false" width="150rpx" height="150rpx"
					ref="uUpload" :auto-upload="true" max-count="1" :name="'img'">
				</u-upload>
			</view>

			<view class="u-flex u-row-between u-b-r-20 u-m-t-20" style="background-color:#F5F5F5FF ; padding: 20rpx;">
				<view class="u-font-28">店铺名称</view>
				<view class="u-flex">
					<u-input input-align='right' v-model="name" type='text' placeholder='请输入名称' :border='false'>
					</u-input>
				</view>
			</view>

			<view class="u-flex u-row-between u-b-r-20 u-m-t-20" style="background-color:#F5F5F5FF ; padding: 20rpx;">
				<view class="u-font-28">入住区域</view>
				<view class="u-flex" @click="choes">
					<view class="">{{area}}</view>
					<!-- <view class="u-font-20 u-m-l-20" style="color: #898989;" v-if="status!=2">(不可改)</view> -->
				</view>
			</view>

			<view class="u-flex u-row-between u-b-r-20 u-m-t-20" style="background-color:#F5F5F5FF ; padding: 20rpx;">
				<view class="u-font-28">店铺地址</view>
				<view class="u-flex">
					<view class="" >
						<u-input type='text' placeholder='请输入地址' v-model="address"></u-input>
					</view>

				</view>
			</view>
			<view class="u-flex u-row-between u-b-r-20 u-m-t-20" style="background-color:#F5F5F5FF ; padding: 20rpx;">
				<view class="u-font-28">微信</view>
				<view class="u-flex">
					<u-input input-align='right' v-model="wx" type='text' placeholder='请输入微信' :border='false'>
					</u-input>
				</view>
			</view>
			<view class="u-flex u-row-between u-b-r-20 u-m-t-20" style="background-color:#F5F5F5FF ; padding: 20rpx;">
				<view class="u-font-28">联系电话</view>
				<view class="u-flex">
					<u-input input-align='right' v-model="phone" type='text' placeholder='请输入电话' :border='false'>
					</u-input>
				</view>
			</view>
			<view class="u-flex u-row-between u-b-r-20 u-m-t-20" style="background-color:#F5F5F5FF ; padding: 20rpx;">
				<view class="u-font-28">店铺描述</view>
				<view class="u-flex u-w-400">
					<u-input v-model="massage" type='textarea' placeholder='请输入店铺描述' :border='false'>
					</u-input>
				</view>
			</view>
			<view class="" style="padding: 20rpx;">
				<view class="u-font-28">店铺背景图</view>
				<view class="u-l-h-40 u-font-26 u-m-t-20" style="color: #898989;">（上传1张图片，文件格式为bmp、png、jpeg、jpg或gif，
					建议尺寸：750*470px，不超过2M）</view>

				<view class="u-m-t-30">
					<u-upload @on-success="uploadeds" upload-text="点击上传" @on-remove="removes"
						:preview-full-image="false" :file-list="fileLists" imageMode="aspectFit" :show-progress="false"
						width="313rpx" height="187rpx" ref="uUpload" :auto-upload="true" max-count="1" :name="'img'">
					</u-upload>
				</view>
			</view>
		</view>

		<view class="u-m-t-30 u-p-b-100">
			<view class="u-p-20 u-b-20 bg_FFFFFF">
				<view class="u-p-20  u-b-r-20" style="background-color:#F5F5F5FF  ;">
					<view class="u-flex u-row-between">
						<view class="">
							<text style="color: red;">*</text>
							<text class="u-weight u-font-28">商家配送</text>
						</view>
						<view class="">
							<u-switch v-model="checked" size="35" inactive-color='#C8C8C8' active-color='red' @change='change'>
							</u-switch>
						</view>
					</view>
					<view class="u-m-t-20 u-font-28">开启后用户下单配送方式可选择店铺配送商品</view>
				</view>
			</view>
			<!-- #ifdef APP-PLUS -->
			<view @click="downMaster" class="u-p-20 u-font-28 u-text-center">
				下载商家APP
			</view>
			<!-- #endif -->
		</view>
		<u-picker mode="selector" v-model="show" :default-selector='[0]' :range="address_list" range-key="area_name"
			@confirm='confirm'>
		</u-picker>
		<u-picker mode="selector" v-model="show1" :default-selector='[0]' :range="address_list1" range-key="area_name"
			@confirm='confirm1'>
		</u-picker>
		<u-picker mode="selector" v-model="show2" :default-selector='[0]' :range="address_list2" range-key="area_name"
			@confirm='confirm2'>
		</u-picker>
		<view class="u-h-100">
			
		</view>
		<view class="u-fix u-b-0 u-z-300 u-w-750 bg_FFFFFF u-p-20">
			<view  class="u-h-100 u-l-h-100 cl_FFF u-text-center u-b-r-16 "
				style="background: linear-gradient(-64deg, #FF382C, #FF633F);" @click="save">保存</view>
		</view>
		
	</view>
</template>

<script>
	import {
		URL
	} from '@/config/config.js'
	export default {
		data() {
			return {
				show: false,
				name: "",
				wx: "",
				phone: '',
				massage: '',
				checked: false,
				fileList: [],
				fileLists: [],
				// 表单参数
				model: {
					avatar: '',
					name: ''
				},
				models: {
					avatar: '',
					name: ''
				},
				give: 0,

				shop_massage: '',
				status: '',
				// 入驻区域
				area: '请选择',
				// 店铺地址
				address: '',
				show: false,
				address_list: [],
				show1: false,
				address_list1: [],
				show2: false,
				address_list2: [],
				address_id: ''
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.detail()
		},
		methods: {
			downMaster(){
				// location.href=`${URL.split('index.php')[0]}masterDown/`
				// #ifdef APP-PLUS
				plus.runtime.openURL(`${URL.split('index.php')[0]}masterDown/`)
				// #endif
				
			},
			detail(){
				// 当前资料审核状态
				this.status = uni.getStorageSync("status")
				if (this.status != 2) {
					// 店铺信息
					this.shop_massage = uni.getStorageSync("shop_massage")
					this.wx = this.shop_massage.wechat
					this.address = this.shop_massage.address
					this.area = this.shop_massage.area
					this.name = this.shop_massage.name
					this.phone = this.shop_massage.mobile
					this.massage = this.shop_massage.describe
					this.address_id = this.shop_massage.area_id
					this.model.avatar = this.shop_massage.logo
					this.fileList.push({
						url: this.shop_massage.logo_url
					})
					this.models.avatar = this.shop_massage.bg_img
					this.fileLists.push({
						url: this.shop_massage.bg_img_url
					})
					if (this.shop_massage.store_delivery == 1) {
						this.checked = true
					} else {
						this.checked = false
					}
				}
			},
			// logo修改
			uploaded(lists) {
				this.model.avatar = lists.id
			},
			// 移除logo
			remove(index, lists) {
				this.fileList = []
				this.model.avatar = ''
			},
			//背景图修改
			uploadeds(lists) {
				this.models.avatar = lists.id
			},
			// 移除logo
			removes(index, lists) {
				this.fileLists = []
				this.models.avatar = ''
			},
			// 点击选择地址
			choes() {
				this.area = '请选择'
				this.$api.shop_start_address({}, res => {
					this.address_list = res.data.data
					this.show = true
				})
			},
			confirm(e) {
				this.area = this.address_list[e[0]].area_name
				this.address_list1 = this.address_list[e[0]].child
				this.show = false
				this.show1 = true
			},
			confirm1(e) {
				this.area = this.area + this.address_list1[e[0]].area_name
				this.address_list2 = this.address_list1[e[0]].child
				this.show1 = false
				this.show2 = true
			},
			confirm2(e) {
				this.area = this.area + this.address_list2[e[0]].area_name
				this.address_id = this.address_list2[e[0]].id
				this.show2 = false
			},
			// 打开滑块
			change(e) {
				console.log(this.checked);
			},
			// 点击提交
			save() {
				if (this.checked == true) {
					this.give = 1
				} else {
					this.give = 0
				}
				if (this.model.avatar == '') {
					uni.showToast({
						icon: 'none',
						title: '请上传商铺logo'
					})
				} else if (this.name.trim() == "") {
					uni.showToast({
						icon: 'none',
						title: '请输入店铺名称'
					})
				} else if (this.wx == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入正确微信号'
					})
				} else if (this.phone.trim() == '' || !(
						/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/).test(this.phone)) {
					uni.showToast({
						icon: 'none',
						title: "请输入正确手机号码"
					})
				} else if (this.massage.trim() == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入店铺描述'
					})
				} else if (this.models.avatar == '') {
					uni.showToast({
						icon: 'none',
						title: '请上传背景图'
					})
				} else {
					this.$api.change_shop_massage({
						logo: this.model.avatar,
						name: this.name,
						area: this.area,
						address:this.address,
						wechat: this.wx,
						area_id:this.address_id,
						mobile: this.phone,
						describe: this.massage,
						bg_img: this.models.avatar,
						store_delivery: this.give,
						shop_id: uni.getStorageSync('shop_massage').id
					}, res => {
						if (res.data.code == 1) {
							uni.showToast({
								icon: 'success',
								title:res.data.msg
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
						}
					})
				}
			}
		}
	}
</script>

<style scoped>
	page {
		background: #F5F5F5FF !important;
	}
</style>
